<template>
    <div class="stepsReg">
        <el-form
                label-width="0"
                :model="formLabelAlign"
                ref="ruleForm"
                :rules="rules"
                size="small"
        >
            <el-form-item prop="email" :error="formErr.emailErr">
                <el-input
                        v-model="formLabelAlign.email"
                        placeholder="请输入邮箱"
                ></el-input>
            </el-form-item>

            <el-form-item prop="username">
                <el-input
                        v-model="formLabelAlign.username"
                        placeholder="请输入用户名"
                        minlength="3"
                        maxlength="20"
                ></el-input>
            </el-form-item>

            <el-form-item prop="password" :error="formErr.userErr">
                <el-input
                        v-model="formLabelAlign.password"
                        placeholder="请输入密码"
                        minlength="3"
                        maxlength="20"
                        type="password"
                ></el-input>
            </el-form-item>

            <el-form-item prop="password_repeat" :error="formErr.userErr">
                <el-input
                        v-model="formLabelAlign.password_repeat"
                        placeholder="请输入再次输入密码"
                        minlength="3"
                        maxlength="20"
                        type="password"
                ></el-input>
            </el-form-item>

            <!--            <el-form-item prop="mobile" :error="formErr.mobileErr">-->
            <!--                <el-input-->
            <!--                    v-model="formLabelAlign.mobile"-->
            <!--                    placeholder="请输入手机号"-->
            <!--                    minlength="11"-->
            <!--                    maxlength="11"-->
            <!--                    type="tel"-->
            <!--                ></el-input>-->
            <!--            </el-form-item>-->

            <el-form-item prop="image_text" :error="formErr.codeErr">
                <el-input
                        v-model="formLabelAlign.image_text"
                        placeholder="验证码"
                        minlength="4"
                        maxlength="4"
                        @keyup.enter.native="reg"
                >
                    <img
                            slot="append"
                            :src="'data:image/jpg;base64,'+code_image"
                            alt="图片验证码"
                            class="code_image"
                            @click="getImgCode"
                    />
                </el-input>
            </el-form-item>

            <el-form-item style="text-align: center;margin-top: 20px;">
                <el-button type="primary" style="width: 100%;" @click="reg">立即注册</el-button>
            </el-form-item>
        </el-form>

        <div class="footer flex-row ite-c jus-e">
            <router-link class="go flex-row ite-c " to="/login">
                <i class="el-icon-back"></i>
                <span>前往登录</span>
            </router-link>
        </div>
    </div>
</template>

<script>
    import {imageCode,userRegister} from '@/api/user'
    import {regRules} from '@forms/user'

    export default {
        name: "stepsReg",
        data() {
            return {
                formLabelAlign: {
                    email: '',
                    username: '',
                    password: '',
                    password_repeat: '',
                    // mobile: '',
                    image_text: '',
                },
                image_uuid: '',
                code_image: '',
                rules: {},
                formErr:{
                    emailErr: '',
                    userErr: '',
                    passErr: '',
                    // mobileErr: '',
                    codeErr:'',
                },
            }
        },
        mounted() {
            this.rules = regRules.call(this)
            this.getImgCode()
        },
        methods: {
            // 获取图片验证码
            getImgCode() {
                imageCode()
                    .then(res => {
                        if (Number(res.code) === 0) {
                            this.image_uuid = res.data.image_uuid
                            this.code_image = res.data.image
                        } else {
                            this.$Alert({message: res.msg, type: 'error'})
                        }
                    })
            },
            // 登陆
            reg() {
                this.$refs.ruleForm.validate((valid) => {
                    if (!valid) return false

                    let formLabelAlign = this.formLabelAlign
                    let params = {
                        email: formLabelAlign.email,
                        username: formLabelAlign.username,
                        password: formLabelAlign.password,
                        password_repeat: formLabelAlign.password_repeat,
                        // mobile: formLabelAlign.mobile,
                        image_text: formLabelAlign.image_text,
                        image_uuid: this.image_uuid,
                    }

                    userRegister(params)
                        .then(res => {
                            if (Number(res.code) === 0) {
                                this.$router.push({
                                    path:'/reg',
                                    query:{
                                        active:1,
                                    }
                                })
                            } else {
                                this.errTip(res.msg)
                                this.getImgCode()
                            }
                        })
                });
            },
            // 错误提示
            errTip(msg){
                let formErr = this.formErr
                for(let key in formErr){
                    this.formErr[key] = ''
                }

                let addErr = msg=>{
                    if (/邮箱/.test(msg)) formErr.emailErr = msg

                    if (/验证码/.test(msg)) formErr.codeErr = msg

                    if(/用户名/.test(msg)) formErr.userErr = msg

                    if(/密码/.test(msg)) formErr.passErr = msg

                    // if(/手机/.test(msg)) formErr.mobileErr = msg
                }


                if(/\//.test(msg)){
                    let msgArr = msg.split('/')
                    for (let i = 0; i < msgArr.length; i++) {
                        let item = msgArr[i]
                        addErr(item)
                    }
                }else{
                    addErr(msg)
                }
            },
            initData(){
                let formErr = this.formErr
                let formLabelAlign = this.formLabelAlign

                for(let key in formErr)formErr[key] = ''
                for(let key in formLabelAlign)formLabelAlign[key] = ''
            },
        },
    }
</script>

<style scoped lang="less">
    .stepsReg{
        .title{
            color: #5c5451;
            font-size: 24px;
            font-weight: 700;
        }

        .el-form{
            width: 50%;
            margin: auto;
        }

        .go{
            width: 50%;
            margin: auto;
            color:#409EFF;
            font-size: 16px;
            i{
                margin-right: 5px;
            }
        }

        .code_image {
            height: 30px;
            cursor: pointer;
        }
    }

    @media screen and (max-width: 900px){
        .stepsReg{
            .el-form{
                width: 95%;
            }
            .go{
                width: 95%;
            }
        }
    }
</style>
